<template>
  <div>
    <!-- <h2 class="chart-title">总人口数</h2> -->
    <div id="gauge1"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const response = await this.$http.get("metrics/statistics")
      if (response.status == 200) {
        const data = response.data
        this.posts = data[0].value
        this.comments = data[1].value
        this.participants = data[2].value
        this.updateChartData()
      }
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("gauge1"));

      this.chart.setOption({
        title: [
        {
          text: "总数据量",
          textStyle: {
            color: "#d1e6eb",
            fontSize: 20
          },
          left: "center",
          top: "10"
          },
          {
            text: "发帖量",
            left: "18%",
            top: "70%",
            textAlign: "center",
            textStyle: {
              color: "white",
              fontSize: 20,
              textAlign: "center"
            }
          },

          {
            text: "数据量",
            left: "47.6%",
            top: "70%",
            textAlign: "center",
            textStyle: {
              color: "white",
              fontSize: 20,
              textAlign: "center"
            }
          },
          {
            text: "参与人数",
            left: "78%",
            top: "70%",
            textAlign: "center",
            textStyle: {
              color: "white",
              fontSize: 20,
              textAlign: "center"
            }
          }
        ],
        series: [
          {
            type: "liquidFill",
            data: [0, 0, 0],
            radius: "26%",
            color: ["#00FFFF", "#00CED1", "#20B2AA"], // 修改颜色为青绿色
            center: ["20%", "40%"], // 这是第一个小圆圈的位置
            outline: {
              borderDistance: 5,
              itemStyle: {
                borderWidth: 6,
                borderColor: "#00FFFF"
              }
            },
            label: {
              normal: {
                formatter: "0",
                color: "#BBB8E5",
                fontSize: 15
              }
            },
            backgroundStyle: {
              color: "rgba(0, 255, 255, 0.2)" // 修改背景色为青绿色
            }
          },
          {
            type: "liquidFill",
            data: [0, 0, 0],
            radius: "26%",
            color: ["#1ebbff"], // 修改颜色为同一种蓝色
            center: ["49.5%", "40%"],
            outline: {
                borderDistance: 5,
                itemStyle: {
                    borderWidth: 6,
                    borderColor: "#1ebbff" // 修改小圈圈的颜色为蓝色
                }
            },
            label: {
                normal: {
                    formatter: "0",
                    color: "#BBB8E5",
                    fontSize: 15
                },
                color: "red"
            },
            backgroundStyle: {
                color: "rgba(173, 216, 230, 0.2)" // 修改背景色为浅蓝色
            }
        },
          {
            type: "liquidFill",
            data: [0, 0, 0],
            radius: "26%",
            color: ["#1d17ef"], // 修改颜色为同一种蓝色
            center: ["79%", "40%"],
            outline: {
              borderDistance: 5,
              itemStyle: {
                borderWidth: 6,
                borderColor: "#1d17ef" // 修改小圈圈的颜色为蓝色
              }
            },
            label: {
              normal: {
                formatter: "0",
                color: "#BBB8E5",
                fontSize: 15
              },
              color: "red"
            },
            backgroundStyle: {
              color: "rgba(173, 216, 230, 0.2)" // 修改背景色为浅蓝色
            }
          }
        ]
      });
    },
    updateChartData(){
      this.chart.setOption({
        series : [
          {
            data:[0.5,0.333333333,0.16666666667],
            label: {normal: {formatter: this.posts + ""}}},
          {
            data:[0.5,0.333333333,0.16666666667],
            label: {normal: {formatter: this.comments + ""}}},
          {
            data:[0.5,0.333333333,0.16666666667],
            label: {normal: {formatter: this.participants + ""}}}
        ]
      })
    }
  },
  beforeDestroy() {
    this.chart.dispose();
    this.chart = "";
  }
};
</script>

<style lang="scss" scoped>

#gauge1 {
  width: 100%;
  height: 40vh;
}
</style>
